<template>
  <div>默认界面</div>
  <NFlex inline>
    <NFormItem>
      <NInput v-model:value="queryInfo.info" placeholder="请输入信息"></NInput>
      <NButton :loading="loading" @click="getMd5()">转换成md5</NButton>
      <NButton :loading="loading">大写模式=></NButton>
    </NFormItem>
  </NFlex>
  <!-- <template>
    <n-switch v-model:value="active" @update:value="handleChange" />
  </template> -->

  <div class>
    <NButton @click="showAdd()" preset="dialog">加密文件</NButton>
    <NInput type="textarea" v-model:value="info" placeholder="请输入加解密码"></NInput>
    <NFlex inline>
      <NFormItem>
        <NButton @click="showAdd()" preset="dialog">加密</NButton>/
        <NButton @click="showAdd()" preset="dialog">解密</NButton>
      </NFormItem>
    </NFlex>
  </div>
</template>

<script setup lang="ts">
import { Api } from '@/types/Api'
import { NButton, NFlex, NFormItem, NInput, useMessage } from 'naive-ui'
import { defineComponent, ref } from 'vue'

const handleChange = (value: boolean) => {
  console.log(value)
}

const message = useMessage()

const info = ref({})
const list = ref([])
const loading = ref(false)
const avisible = ref(false)
const queryInfo = ref({ info: '' })

const getMd5 = () => {
  loading.value = true
  Api.post('/api/tools/md5', queryInfo.value, (data) => {
    message.success('转换成功')
    info.value = data.message
    loading.value = false
  })
}

const active = ref(false)

//#region 加密
const showAdd = () => {
  avisible.value = true
  info.value = ''
}

const add = () => {}

//#endregion
</script>

<style scoped lang="scss"></style>
